<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" size="mini" :round="true" style="margin: 30px 20px" @click="addtardmark('add')">添加</el-button>
    <el-table
      :data="tableData"
      style="width: 100% ;margin-left: 30px;"
      border
    >
      <el-table-column
        prop="date"
        label="序号"
        width="180"
        type="index"
      />
      <el-table-column
        prop="tmName"
        label="品牌名称"
        width="300"
      />
      <el-table-column
        label="品牌"
        width="240"
      >
        <template slot-scope="scope">
          <img :src="scope.row.logoUrl" style="width: 80px ;height: 50px">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row,'edit')"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="open(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页器-->
    <!--    @size-change="handleSizeChange"   ====pageSize 改变时会触发	每页条数-->
    <!--       @current-change="handleCurrentChange"====current-change	currentPage 改变时会触发	当前页-->
    <!--    current-page当前页数  page-sizes每页显示个数选择器的选项设置 page-size每一页显示多少条数据-->
    <div class="block">
      <el-pagination
        :current-page="shopList.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="shopList.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="shopList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--  添加dialog的对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item v-show="false" label="id">
          <input v-model="form.id">
        </el-form-item>
        <el-form-item
          label="品牌名称"
          label-width="100px"
          :rules="[
            { required: true, message: '请输入品牌名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <!--          :on-success="handleAvatarSuccess" 文件上传成功的钩子-->
        <!--         :before-upload="beforeAvatarUpload"上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。-->
        <!--        action图片上传的地址-->
        <el-form-item label="品牌Logo" label-width="100px">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addtarsmarkTrue(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { addTardmark, editTardmark, removeTardmark } from '@/api/shop'
export default {
  name: 'TardMark',
  data() {
    return {
      page: 1,
      limit: 10,
      dialogFormVisible: false,
      title: '添加品牌',
      form: {
        name: '',
        id: ''
      },
      // 添加品牌的参数
      logoUrl: '',
      imageUrl: ''
    }
  },
  computed: {
    ...mapState({
      shopList: state => state.shop.shopInfo || {}
    }),
    tableData() {
      return this.shopList.records
    }
  },
  mounted() {
    this.getdata()
  },
  methods: {
    getdata() {
      this.$store.dispatch('getShopList', { page: this.page, limit: this.limit })
    },
    // 每条页数改变时触发的回调
    handleSizeChange(size) {
      console.log('size', size)
      this.limit = size
      this.getdata()
    },
    //	当前页 改变时会触发	当前页
    handleCurrentChange(pageNo) {
      this.page = pageNo
      this.getdata()
    },
    addtardmark(type) {
      if (type == 'add') {
        this.title = '添加品牌'
        this.form.name = ''
        this.form.id = ''
        this.dialogFormVisible = true
      }
    },
    // 编辑的回调
    handleEdit(index, row, type) {
      console.log(index, row, type)
      if (type == 'edit') {
        this.title = '编辑品牌'
      }
      this.dialogFormVisible = true
      this.form.name = row.tmName
      this.imageUrl = row.logoUrl
      this.form.id = row.id
    },
    // 删除的回调
    open(index, row) {
      console.log(index, row)
      this.$confirm(`此操作将永久删除该${row.tmName},是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        const res = await removeTardmark(row.id)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getdata()
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '系统数据，不能删除'
        })
      })
    },
    // 点击确定的 发送请求
    async addtarsmarkTrue(form) {
      if (form.id) {
        const res = await editTardmark({ id: form.id, logoUrl: this.logoUrl, tmName: this.form.name })
        console.log('编辑的回调', res)
        if (res.code == 200) {
          this.getdata()
          this.dialogFormVisible = false
        } else {
          this.$message.error('编辑失败')
        }
      } else {
        const res = await addTardmark({ logoUrl: this.imageUrl, tmName: this.form.name })
        if (res.code == 200) {
          // 重新获取列表
          this.getdata()
          this.dialogFormVisible = false
        } else {
          this.$message.error('网络不稳定')
          this.dialogFormVisible = false
        }
      }
    },
    // 用户上传品牌logo相关的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

